<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>工程师配置管理</title>
<%@include file="/WEB-INF/common/headeradmin.jsp" %>
</head>
<body style="width:100%;height:100%">
	<div id="pp">
	    <div style="width:33%"></div>
	    <div style="width:33%"></div>
	    <div style="width:33%"></div>
    </div>
    <div id="addeditDlg" class="easyui-dialog" data-options="modal:true,closed:true" style="width:300px;height:120px;">
		<form method="post">
		<!-- 当前选中的表格 -->
    	<input type="hidden" id="curDatagrid"/>
    	<!-- 当前选中的行编号 -->
    	<input type="hidden" id="curRowIndex"/>
    	<table>
    		<tr><td>可选值</td><td><input type="text" id="value" name="value" class="easyui-validatebox" data-options="required:true"/></td></tr>
    	</table>
    	</form>
    </div>
	<script type="text/javascript">
	/*解决bug，修改后不能移动以及行号混乱 */
	function refreshRows($grid){
  		var rows = $grid.datagrid("getRows");
	   	for(var i = 0; i < rows.length; i++) {
			$grid.datagrid("refreshRow", i);
       	}
       	$grid.datagrid("getPanel").find("div.datagrid-view div.datagrid-body table tr.datagrid-row").addClass("droppable");
	}
	
	// 新增和修改对话框
	$("#addeditDlg").dialog({
		buttons:[
		   {text:"确定", handler:function(){
			   var $grid = $($("#curDatagrid").val());
			   if($("#curRowIndex").val()) { // 修改
			       var $grid = $($("#curDatagrid").val());
			       $grid.datagrid("updateRow", { index: $("#curRowIndex").val(), row: {value: $("#value").val()} });
			       refreshRows($grid);
			   } else { // 新增
				   $grid.datagrid("appendRow", { value: $("#value").val() });
			   }
			   $("#addeditDlg form").form("reset");
			   $("#addeditDlg").dialog("close");
		   }}
		]
	});
	
	// 初始化portal,加载数据
	$("#pp").portal({border:false});
	$.get(root+"/admin/config/engineer/find",function(json){
		var i = 0;
		for(var key in json){
			var p = createPanel(json, key);
            addPanel(p, i);
			i++;
			if(i % 3 == 0) {
				i = 0;
			}
		}
		var p = $("<div>").appendTo("body");
		p.panel({
        	height: 200,
        	collapsible : false,
        	border: false
        });
		$("<a href='javascript:void(0)'>保存配置</a>")
		.linkbutton({
			iconCls:"icon-woocons-32-button-white-check",
			size:"large",
			iconAlign:"top"
		}).click(function(){
			update();
		}).appendTo(p);
		$("<span>&nbsp;</span>").appendTo(p);
		$("<a href='javascript:void(0)'>恢复配置</a>")
		.linkbutton({
			iconCls:"icon-woocons-32-button-white-load",
			size:"large",
			iconAlign:"top"
		}).click(function(){
			location.reload();
		}).appendTo(p);
		
		$('#pp').portal('add',{
            panel:p,
            columnIndex:i
        });
		
		$("#pp").portal("resize");
	});
	
	// 生成表格
	function createPanel(json,key) {
		var p = $("<div>").appendTo("body");
        p.panel({
        	id: key,
        	title: json[key].name,
        	height: 200,
        	collapsible : false
        });
        addToolbar(key);
        var t = $("<table class='config'>").attr("id","datagrid_"+key);
        t.appendTo(p);
        t.datagrid({
        	columns:[[
        	  {title:"可选值", field:"value", width: 1}
        	]],
        	data:json[key].values,
        	toolbar:"#toolbar_"+key,
        	rownumbers:true,
        	dndRow: true,
        	fit:true,
        	fitColumns: true,
        	singleSelect: true,
        	border:false,
        	name: json[key].name
        });
        return p;
	}
	
	// 生成每个表格的工具条
	function addToolbar(key) {
		var a1 = $("<a href='javascript:void(0)'>新增</a>")
	    	.linkbutton({
	        	iconCls:"icon-standard-plugin-add",
	        	plain:true,
	        	key:key
	        })
	        .click(function(){	        	
	        	var gridId = "#datagrid_"+$(this).linkbutton("options").key;
	        	$("#curDatagrid").val(gridId);
	        	$("#addeditDlg").dialog("setTitle","新增可选值").dialog("open");
	    	});
	    var a2 = $("<a href='javascript:void(0)'>修改</a>")
	    	.linkbutton({
	        	iconCls:"icon-standard-plugin-edit",
	        	plain:true,
	        	key:key
	        })
	        .click(function(){
	        	var gridId = "#datagrid_"+$(this).linkbutton("options").key;
	        	var row = $(gridId).datagrid("getSelected");
	        	if(row == null) {
	        		$.messager.alert("请选中要修改的行");
	        		return;
	        	}	        	
	        	$("#curRowIndex").val($(gridId).datagrid("getRowIndex",row));
	        	$("#curDatagrid").val(gridId);
	        	$("#value").val(row.value);
	        	$("#addeditDlg").dialog("setTitle","修改可选值").dialog("open");
	    	});
	    var a3 = $("<a href='javascript:void(0)'>删除</a>")
	    	.linkbutton({
	        	iconCls:"icon-standard-plugin-delete",
	        	plain:true,
	        	key:key
	        })
	        .click(function(){
	        	var gridId = "#datagrid_"+$(this).linkbutton("options").key;
	        	var row = $(gridId).datagrid("getSelected");
	        	if(row == null) {
	        		$.messager.alert("请选中要删除的行");
	        		return;
	        	}
	        	$(gridId).datagrid("deleteRow", $(gridId).datagrid("getRowIndex",row));
	    	});
	    var toolbar = $("<div></div>").attr("id" , "toolbar_"+key)
	    	.append(a1).append(a2).append(a3).appendTo("body");
	}
	
	// 将Panel添加至Portal
	function addPanel(panel, columnIndex){
		$('#pp').portal('add',{
            panel:panel,
            columnIndex:columnIndex
        });
	}
	
	function update(){
		var all = {};
		$("table.config").each(function(idx,t){
			var key = $(this).attr("id").replace("datagrid_", "");
			all[key] = {};
			all[key].name = $(this).datagrid("options").name;
			all[key].values = $(this).datagrid("getRows");
		});
		
		var ii = layer.load();
		$.post(root+"/admin/config/engineer/update", {json:JSON.stringify(all)}).complete(function(){
			setTimeout(function(){
				layer.close(ii);
			}, 3000);
		});
	}
	
	</script>
</body>
</html>